<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="element/index.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script src="element/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#app {
				margin: 0 auto;
				width: 1300px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-top: 20px;

			}

			.el-input__inner {
				border: none;
				text-align: center;

			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="">
				<el-row>
					<el-col :span="12" style="padding-left: 80px; margin-top: 20px; height: 50px;">
						<h3>个人中心</h3>
					</el-col>
					<el-col :span="12" style="text-align: right; padding-top: 15px; padding-right: 80px; ">
						<el-button type="primary"  @click="toIndex" >
							<el-link style="color: white;" href="javascript:void(0)">返回</el-link>
						</el-button>
					</el-col>
				</el-row>
				<hr />
				<el-form ref="form" label-width="180px">
					<el-row>
						<el-col :span="12" style="padding-top: 40px;">
							<el-form-item label="工号:">
								<el-input v-model="num" readonly style="width:300px;"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="12" style="text-align: center; padding-top: 20px;">
							<el-avatar shape="square" :src="squareUrl" style="width: 100px; height: 100px;"></el-avatar>
						</el-col>
						<el-col :span="12">
							<el-form-item label="姓名:">
								<el-input v-model="username" readonly style="width:300px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" style="text-align: center;">
							<el-button type="button">点击更换头像</el-button>
						</el-col>
						<el-col :span="24">
							<el-form-item label="手机号:">
								<el-input v-model="phonenumber" readonly style="width:300px;"></el-input>
								<el-button type="button" style="margin-left: 10px;">修改</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="邮箱:">
								<el-input v-model="email" readonly style="width:300px;"></el-input>
								<el-button type="button" style="margin-left: 10px;">修改</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	let vm = new Vue({
		el: "#app",
		data: {
			num: "1111",
			username:"康清龙",
			phonenumber: "17341334923",
			email: "1945322355@qq.com",
			squareUrl: "img/1.png",
			input: ""
		},
		methods: {
			toIndex(){
				window.parent.location='index.html'
			}
		}
	})
</script>
